<template>
    <ClientOnly>
        <popup
            :show="visible"
            width="480px"
            title="创建知识库"
            :async-close="true"
            @close="emits('close')"
            @confirm="handleSubmit"
        >
            <div class="p-6 pb-0">
                <el-form class="layout-forms" :model="formData" :rules="formRules" label-position="right" label-width="110px">
                    <el-form-item label="知识库图标" prop="logo">
                        <upload-single v-model="formData.logo" />
                    </el-form-item>
                    <el-form-item label="知识库名称" prop="name">
                        <el-input v-model="formData.name" placeholder="请输入知识库名称" maxlength="20" />
                    </el-form-item>
                    <el-form-item label="知识库简介" prop="intro">
                        <el-input
                            v-model="formData.intro"
                            placeholder="用一句话介绍知识库"
                            type="textarea"
                            :rows="5"
                            show-word-limit
                        />
                    </el-form-item>
                    <el-form-item label="向量训练模型" prop="vector_model">
                        <models-select
                            v-model="formData.vector_model"
                            :model="formData.vector_model"
                            type="vector"
                        />
                    </el-form-item>
                    <el-form-item label="文件处理模型" prop="splits_model">
                        <models-select
                            v-model="formData.splits_model"
                            :model="formData.splits_model"
                            type="chat"
                        />
                    </el-form-item>
                </el-form>
            </div>
        </popup>
    </ClientOnly>
</template>

<script setup lang="ts">
import knowManageApi from '~/api/agent/know/manage'
import feedback from '~/utils/feedback'

const emits = defineEmits(['confirm', 'close'])

const formRef = ref()
const visible = ref<boolean>(false)

// 表单数据
const formData = reactive({
    logo: '',         // 知识库图标
    name: '',         // 知识库名称
    intro: '',        // 知识库简洁
    vector_model: '', // 向量模型
    splits_model: ''  // 拆分模型
})

// 表单规则
const formRules: any = reactive({
    logo: [
        { max: 250, message: '图标链接不能大于250个字符', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '知识库名称不能为空', trigger: 'blur' },
        { max: 32, message: '知识库名称不能大于32个字符', trigger: 'blur' }
    ],
    intro: [
        { max: 800, message: '知识库简介不能大于800个字符', trigger: 'blur' }
    ],
    vector_model: [
        { required: true, message: '请选择向量训练模型', trigger: 'blur' }
    ],
    splits_model: [
        { required: true, message: '请选择文件处理模型', trigger: 'blur' },
    ]
})

/**
 * 提交表单
 */
const handleSubmit = async () => {
    await formRef.value?.validate()
    await knowManageApi.add(formData)

    emits('close')
    emits('confirm')
    visible.value = false
    feedback.msgSuccess('创建成功')
}

const open = () => {
    visible.value = true
}

defineExpose({
    open
})
</script>


